<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
</head>
<body>
<div id="app">
  <template>
    <Alert show-icon>消息提示文案</Alert>
    <Alert type="success" show-icon>成功提示文案</Alert>
    <Alert type="warning" show-icon>警告提示文案</Alert>
    <Alert type="error" show-icon>错误提示文案</Alert>
    <Alert show-icon closable>
      消息提示文案
      <template slot="desc">消息提示的描述文案消息提示的描述文案消息提示的描述文案消息提示的描述文案消息提示的描述文案</template>
    </Alert>
    <Alert type="success" show-icon closable>
      成功提示文案
      <span slot="desc">成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案</span>
    </Alert>
    <Alert type="warning" show-icon closable>
      警告提示文案
      <template slot="desc">
        警告的提示描述文案警告的提示描述文案警告的提示描述文案
      </template>
      <span slot="close">不再提示</span>
    </Alert>
    <Alert type="error" show-icon>
      错误提示文案
      <span slot="desc">
            自定义错误描述文案。
        </span>
    </Alert>
    <Alert show-icon>
      自定义图标
      <Icon type="ios-lightbulb-outline" slot="icon"></Icon>
      <template slot="desc">自定义图标文案自定义图标文案自定义图标文案自定义图标文案自定义图标文案</template>
    </Alert>
  </template>
</div>
<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script><!-- vue 2.x系列最新版本的支持 -->
<script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
<script>
  var Main = {}
  var Ctor = Vue.extend(Main)
  new Ctor().$mount('#app')
</script>

</body>
</html>
